import React, { useEffect, useRef } from 'react'
import { Card, Breadcrumb, Form, Input, Button, Radio } from 'antd'
import { Link } from 'react-router-dom'
import Channels from 'pages/Channels'
// 富文本
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
// 导入scss
import styles from './index.module.scss'
// 导入接口
import { addArticles, ediArticles, getArticlesInfo } from 'api/articles'

import { Upload, message, Modal } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { baseURL } from 'utils/request'
import { getToken } from 'utils/settingToken'
import { useState } from 'react'
import history from 'utils/history';
export default function ArticlePublish({ match }) {
    // 获取点击编辑的ID
    const id = match.params.id
    // 获取用户列表
    const getArticlesInfofn = async () => {
        if (id) {
            // 发起请求获取详情文章
            const res = await getArticlesInfo(id)
            console.log('Info', res);
        }
    }

    useEffect(() => {
        getArticlesInfofn()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    // console.log('编辑', match.params.id);
    // const [images, setImages] = useState([])
    const [images, setImages] = useState([
        // {
        //     uid: '-1',
        //     name: 'image.png',
        //     status: 'done',
        //     // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        // },
    ])

    const props = {
        // 文件列表
        fileList: images,
        // 接受上传的文件类型，选择时只展示 .png,.jpg,.jpeg
        accept: '.png,.jpg,.jpeg',
        listType: 'picture-card',
        // maxCount: 3,
        name: 'image',
        action: baseURL + '/v1_0/upload',
        headers: {
            Authorization: `Bearer ${getToken()}`,
        },
        onChange({ file, fileList }) {
            // console.log('文件列表发生了变化', { file, fileList })
            // 文件变化(上传，删除，错误)，都需要更新 fileList
            setImages(fileList)
            // 非上传中打印检查数据
            // if (file.status !== 'uploading') {
            //     console.log({ file, fileList })
            // }
            // if (file.status !== 'uploading') {
            //   console.log({ file, fileList })
            // }
            // 上传完成判断
            if (file.status === 'done') {
                // setImages(fileList)
                // message.success(`${file.name} file uploaded successfully`)
                message.success(`${file.name} 上传成功.`)
            }
            // 上传失败判断
            else if (file.status === 'error') {
                // message.error(`${file.name} file upload failed.`)
                message.error(`${file.name} 上传失败.`)
            }
        },
        // 上传前的处理
        beforeUpload: (file) => {
            // 可以通过打印 file.type 查看文件类型
            // console.log(file.type)
            // 允许上传的格式
            const isAllowType = ['image/png', 'image/jpeg'].includes(file.type)
            // 如果不是允许的格式
            if (!isAllowType) {
                message.error(`${file.name}文件格式不对`)
            }
            // 如果需要阻止列表展现，可以通过返回 Upload.LIST_IGNORE 实现。
            return isAllowType ? true : Upload.LIST_IGNORE
        },
        // 点击预览小眼睛
        onPreview: (file) => {
            // console.log('被点击预览的文件', file)
            // 设置预览图片地址
            setPreviewImage(file.thumbUrl)
        },
    }

    // 预览图片地址
    const [previewImage, setPreviewImage] = useState('')

    const draftRef = useRef(false)

    // 点击发布
    const onFinish = async (values) => {
        // console.log({ title, channel_id, content });
        // 普通情况：标题，频道，内容，直接表单收集即可
        // console.log('values', values)
        // 特殊情况：封面处理，在两个 state 中获取
        // console.log('images', images)
        if (coverType !== images.length) return message.warn('封面数量不正确', 1)
        const coverImages = images.map((item) => {
            return item.response.data.url
        })
        const reqParams = {
            ...values,
            // 封面数据
            cover: {
                type: coverType,
                images: coverImages,
            },
            draft: draftRef.current
        }
        // console.log('发布文章的参数检查', reqParams)
        // 调用接口发布文章
        await addArticles(reqParams)
        // 提示用户
        message.success('发布成功')
        // console.log(res)
        history.push('/articleList')
    }
    // 切换封面类型
    const [coverType, setCoverType] = useState(1)
    const coverTypeChange = (newType) => {
        // console.log(value);
        // // 设置封面类型
        // setCoverType(value)
        // // 重置预览图片数组
        // setImages([])
        // setCoverType(newType)
        setCoverType((oldType) => {
            // console.log({ oldType, newType })
            // 切换到无图的时候清空数组
            if (newType === 0) {
                setImages([])
            }
            // 由 3图变成 1图的时候截取数组的第一项
            else if (oldType === 3 && newType === 1) {
                const newImages = images.slice(0, 1)
                setImages(newImages)
            }
            // 💥记得更新CoverType的值
            return newType
        })
    }

    return (
        <div className={styles.ArticleList}>
            <Card
                title={
                    <Breadcrumb separator=">">
                        <Breadcrumb.Item>
                            <Link to="/home">首页</Link>
                        </Breadcrumb.Item>
                        {
                            id ?
                                <Breadcrumb.Item>
                                    <Link to="/articleList">内容管理</Link>
                                </Breadcrumb.Item>
                                : null
                        }
                        <Breadcrumb.Item>{id ? '编辑文章' : '发布文章'}</Breadcrumb.Item>
                    </Breadcrumb>
                }
            >
                <Form labelCol={{ span: 4, }} initialValues={{ channel_id: '推荐', content: '', coverType: 1 }} onFinish={onFinish}>
                    <Form.Item label='标题' name='title' rules={[{ required: true, message: '请输入标题内容' }]}
                        validateTrigger='onBlur'>
                        <Input type="text" placeholder='请输入标题内容' />
                    </Form.Item>
                    <Form.Item label="频道" name='channel_id' rules={[{ required: true, message: '请选择频道类型' }]}>
                        <Channels />
                    </Form.Item>
                    <Form.Item label='内容' name='content' rules={[{ required: true, message: '请输入文章内容' },
                    {
                        validator: (_, value) =>
                            // console.log(40, value),
                            value === '<p><br></p>' ? Promise.reject('请输入文章内容') : Promise.resolve(value)
                    }]}>
                        <ReactQuill theme="snow" placeholder='请输入文章内容......' />
                    </Form.Item>
                    <Form.Item label='封面'>
                        <Radio.Group value={coverType} onChange={(e) => coverTypeChange(e.target.value)}>
                            <Radio value={1}>单图</Radio>
                            <Radio value={3}>三图</Radio>
                            <Radio value={0}>无图</Radio>
                        </Radio.Group>
                    </Form.Item>
                    {/* 封面 - 上传组件部分 */}
                    <Form.Item wrapperCol={{ offset: 4 }}>
                        <Upload {...props}>{images.length < coverType ? <PlusOutlined /> : null}</Upload>
                        <Modal
                            visible={previewImage !== ''}
                            title={'预览图片'}
                            footer={null}
                            onCancel={() => setPreviewImage('')}
                        >
                            <img alt='example' style={{ width: '100%' }} src={previewImage} />
                        </Modal>
                    </Form.Item>
                    <Form.Item wrapperCol={{
                        offset: 4,
                        span: 16,
                    }}>
                        <Button type="primary" htmlType='submit'>发布文章</Button>
                        <Button htmlType='submit' onClick={() => draftRef.current = true}>存草稿</Button>
                    </Form.Item>
                </Form>
            </Card>
        </div >
    )
}